<template>
  <div class="search_body">
    <div class="search_input">
      <div class="search_input_wrapper">
        <i class="iconfont icon-sousuo"></i>
        <input type="text" v-model="message">
      </div>
    </div>
    <div class="search_result">
      <h3>电影/电视剧/综艺</h3>
      <ul>
        <!-- <li>
          <div class="img"><img src="/images/movie_1.jpg"></div>
          <div class="info">
            <p><span>无名之辈</span><span>8.5</span></p>
            <p>A Cool Fish</p>
            <p>剧情,喜剧,犯罪</p>
            <p>2018-11-16</p>
          </div>
        </li> -->
        <li v-for="item in movies.list" :key="item.id">
          <div class="img"><img :src="item.img | setWH('128.180')"></div>
          <div class="info">
            <p><span>{{ item.nm }}</span><span>{{ item.sc }}</span></p>
            <p>{{ item.enm }}</p>
            <p>{{ item.cat }}</p>
            <p>{{ item.rt }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { Debounce } from '@/assets/js/operate'
  import { searchMovie } from '@/api/api'

  export default {
    name: 'search',
    data() {
      return {
        message: '',
        movies: { list: [] },
        cinemas: { list: [] }
      }
    },
    methods: {
      searchMovie: Debounce(function() {
        searchMovie(null, { cityId: 10, kw: this.message }).then(res => {
          let resData = res.data
          if (resData.msg === 'ok') {
            if(resData.data.movies) {
              this.movies = resData.data.movies // data: { movies: { list: [], total: 100, type: 0}, cinemas: { list: [], total: 100, type: 0}}
            } else {
              this.movies = { list: [] }
            }
            if(resData.data.cinemas) {
              this.cinemas = resData.data.cinemas // data: { movies: { list: [], total: 100, type: 0}, cinemas: { list: [], total: 100, type: 0}}
            } else {
              this.cinemas = { list: [] }
            }
          }
        })
      }, 500)
    },
    watch: {
      message(nVal) {
        if(nVal) {
          this.searchMovie()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
